<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册 - 学生成绩管理系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../vue/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="../vue/axios.v0.21.1.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        #top{
            width: 600px;
            height: 100px;
            font-family: Arial,Helvetica,sans-serif;
            color: #4e4e4e;
            position: relative;
        }
        #img{
            width: 420px;
            height: 100px;
            margin: 0;
            float: right;
            position: relative;
            width: 10px;
            height: 10px;
        }
        #login{
            width: 20%;
            height: 100px;
            margin: 0;
            text-align: right;
            float: left;
            position: relative;
            width: 1200px;
            height: 10px;
        }
        #app{
            width: 500px;
            height: 500px;
            background-color: #cde6c7;
            margin: auto;
            position: absolute;
            top: 700px;
            left: 70px;
            right: 0;
            bottom: 0;
        }
        #app.span{
            width: 500px;
            height: 50px;
        }
        body{
            position: relative;
        }
    </style>

</head>
<body>
            <div id="top">
                <div id="login">
                    <a href="index.html"><h1 class="title">登录</h1></a>
                </div>
            </div>
            <div id="app">
                <el-row>
                    <el-col :span="12">
                        <h3 style="color: #cde6c7">
                           fsgdhfju
                        </h3>
                    </el-col>
                </el-row>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="姓名">
                                <el-input v-model="form.name" @blur="nameExist()"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                   <el-row>
                       <el-col :span="18">
                           <el-form-item label="性别">
                               <el-radio-group v-model="form.sex">
                                   <el-radio label="男"></el-radio>
                                   <el-radio label="女"></el-radio>
                               </el-radio-group>
                           </el-form-item>
                       </el-col>
                   </el-row>
                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="年龄">
                                <el-input v-model="form.age"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="账户">
                                <el-input v-model="form.username" @blur="usernameExist()"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="18">
                            <el-form-item label="密码">
                                <el-input type="password" v-model="form.password" @blur="reg()"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                   <el-row>
                       <el-col :span="18">
                           <el-form-item label="确认密码">
                               <el-input type="password" v-model="form.repassword" @blur="alike()"></el-input>
                           </el-form-item>
                       </el-col>
                   </el-row>
                    <el-row>
                        <el-col :span="18">
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">立即注册</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>


                </el-form>
            </div>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                msg:'',
                form: {
                    name: '',
                    sex: '',
                    age: '',
                    username: '',
                    password: '',
                    repassword: ''
                }
            },
            created(){

            },
            methods:{
                onSubmit(){
                    if (this.form.repassword==this.form.password){
                        axios.post("/user/regiest",this.form).then(res=>{
                            if (res.data.flag){
                                this.$message.success(res.data.message);
                                //延时两秒
                                window.setTimeout(function () {
                                    window.location = "http://localhost:8085/login/index.html";
                                },2000)
                            } else {
                                this.$message.error(res.data.message);
                            }
                        });
                    }
                },
                //判断名字是否已经注册
                nameExist(){
                    const name = this.form.name;
                    axios.post("/user/getNameExist",name).then(res=>{
                        if (res.data.flag){
                            this.$message.success(res.data.message);
                        } else {
                            this.$message.error(res.data.message);
                        }
                    });
                },
                usernameExist(){
                    const username = this.form.username;
                    axios.post("/user/usernameExist",username).then(res=>{
                        if (res.data.flag){
                            this.$message.success(res.data.message);
                        } else {
                            this.$message.error(res.data.message);
                        }
                    });
                },
                alike(){
                    if (this.form.repassword!=this.form.password) {
                        this.$message.error("两次输入密码不一致，请重新输入");
                    }
                },
                reg(){
                    const patter = /^(\w){6,8}$/;
                    if (!patter.test(this.form.password)) {
                        this.$message.error("请输入6到8位字母和数字");
                    }
                },
            }
        });


    </script>

</body>
</html>